/**
 * @description 人脸登录表单
 */


/**
 * @description column.type == 图 && column.faceMath == '是'
 * 人脸登录表单
 * 额外功能：
 * 1. 校检 column.faceVerification == true 
 *    识别的图像，与当前用户头像比对
 */

import { Form } from 'antd';

import FaceWrapper from '@/PageCompnents/Login/components/Face';
import { useState } from 'react';
import { iconMap } from '@/components/Icon';

import getRule from '../getRule';

function YyFace({ column, showLabel }) {

  const [imgValue, setImgValue] = useState('')
  const handleChange = (value) => { }

  // [1] 配置校检rules字段。column已经有rules则取，无则重新生成
  let rules = column.rules ? column.rules : getRule(column)

  return (
    <Form.Item
      label={showLabel ? column.comments : null}
      name={column.columnName}
      rules={rules}

    >
      {/* Form表单会自动捕获onchange事件，并赋值 */}
      <FaceForm value={imgValue} onChange={handleChange} faceVerification={column.faceVerification} />
    </Form.Item>
  )
}

export default YyFace

/**
 * 
 * @param {*} param0 
 * @param { boolean } param0.faceVerification 人脸校检功能
 * @returns 
 */
function FaceForm({ value, onChange, faceVerification }) {


  const [imgUrl, setImgUrl] = useState(null)
  const [laoding, setLoading] = useState(false)


  return (
    <div className='face-form-item'>
      {
        imgUrl &&
        <div className='img-box'>
          <img src={imgUrl} />
          <div className='mask'>
            <span onClick={deleteImg}>{iconMap['DeleteOutlined']}</span>
          </div>

        </div>
      }


      <FaceWrapper
        btnTitle={faceVerification ? '人脸校检' : '人脸识别'}
        btnLoading={laoding}
      />


    </div >
  )
}